<template>
  <view class="health-records">
    <!-- 健康数据卡片 -->
    <view class="health-card">
      <view class="data-grid">
        <view class="data-item">
          <text class="value">{{ healthData.height || '--' }}</text>
          <text class="label">身高(cm)</text>
        </view>
        <view class="data-item">
          <text class="value">{{ healthData.weight || '--' }}</text>
          <text class="label">体重(kg)</text>
        </view>
        <view class="data-item">
          <text class="value">{{ healthData.bmi || '--' }}</text>
          <text class="label">BMI</text>
        </view>
        <view class="data-item">
          <text class="value">{{ healthData.bloodType || '--' }}</text>
          <text class="label">血型</text>
        </view>
      </view>
      <button class="update-btn" @tap="showUpdateModal">更新数据</button>
    </view>
    
    <!-- 健康记录列表 -->
    <view class="record-list">
      <view class="section-title">健康记录</view>
      <view 
        class="record-item"
        v-for="(item, index) in healthRecords"
        :key="index"
        @tap="viewRecord(item)"
      >
        <view class="left">
          <image :src="item.icon" mode="aspectFit" class="icon" />
          <view class="info">
            <text class="title">{{ item.title }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    
    <!-- 健康报告 -->
    <view class="report-list">
      <view class="section-title">健康报告</view>
      <view 
        class="report-item"
        v-for="(report, index) in healthReports"
        :key="index"
        @tap="viewReport(report)"
      >
        <view class="header">
          <text class="name">{{ report.name }}</text>
          <text class="date">{{ report.date }}</text>
        </view>
        <view class="content">
          <text class="desc">{{ report.description }}</text>
          <view class="tags">
            <text 
              v-for="(tag, idx) in report.tags" 
              :key="idx"
            >{{ tag }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 健康数据
const healthData = ref({
  height: 175,
  weight: 65,
  bmi: '21.3',
  bloodType: 'A'
})

// 健康记录
const healthRecords = ref([
  {
    icon: '/static/health/blood-pressure.png',
    title: '血压记录',
    time: '今天 09:30',
    path: '/pages/health/blood-pressure'
  },
  {
    icon: '/static/health/heart-rate.png',
    title: '心率记录',
    time: '今天 08:15',
    path: '/pages/health/heart-rate'
  },
  {
    icon: '/static/health/blood-sugar.png',
    title: '血糖记录',
    time: '昨天 20:30',
    path: '/pages/health/blood-sugar'
  }
])

// 健康报告
const healthReports = ref([
  {
    name: '年度体检报告',
    date: '2024-03-20',
    description: '本次体检结果总体良好，建议加强运动，注意作息规律。',
    tags: ['正常', '建议复查'],
    path: '/pages/health/report-detail'
  },
  {
    name: '心电图检查报告',
    date: '2024-03-15',
    description: '心电图检查未见明显异常，窦性心律。',
    tags: ['正常'],
    path: '/pages/health/report-detail'
  }
])

// 查看记录详情
const viewRecord = (record) => {
  uni.navigateTo({
    url: record.path
  })
}

// 查看报告详情
const viewReport = (report) => {
  uni.navigateTo({
    url: `${report.path}?id=${report.id}`
  })
}

// 显示更新数据弹窗
const showUpdateModal = () => {
  uni.navigateTo({
    url: '/pages/health/update-data'
  })
}
</script>

<style lang="scss">
.health-records {
  min-height: 100vh;
  background: $bg-color;
  padding: 30rpx;
  
  .health-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 30rpx;
    
    .data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20rpx;
      margin-bottom: 30rpx;
      
      .data-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .value {
          font-size: 36rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
        }
        
        .label {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
    }
    
    .update-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fff;
      background: $primary-gradient;
      border-radius: $radius-lg;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
  
  .section-title {
    font-size: 32rpx;
    color: $text-primary;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .record-list {
    margin-bottom: 30rpx;
    
    .record-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      padding: 30rpx;
      border-radius: $radius-lg;
      margin-bottom: 20rpx;
      
      .left {
        display: flex;
        align-items: center;
        
        .icon {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }
        
        .info {
          .title {
            font-size: 30rpx;
            color: $text-primary;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .time {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
      
      .icon-arrow-right {
        font-size: 32rpx;
        color: $text-secondary;
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .report-list {
    .report-item {
      background: #fff;
      padding: 30rpx;
      border-radius: $radius-lg;
      margin-bottom: 20rpx;
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
        }
        
        .date {
          font-size: 26rpx;
          color: $text-secondary;
        }
      }
      
      .content {
        .desc {
          font-size: 28rpx;
          color: $text-regular;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .tags {
          display: flex;
          gap: 12rpx;
          
          text {
            font-size: 24rpx;
            color: $primary-color;
            background: $primary-light;
            padding: 4rpx 16rpx;
            border-radius: $radius-sm;
          }
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
}
</style> 